<template>
  <div id="app">
    <transition v-if="!$route.meta.NoNeedHome"
                name="fade"
                mode="out-in">

      <el-row class="container">
        <el-col :span="24"
                class="header">
          <el-col :span="10"
                  class="logo collapsedLogo"
                  :class="collapsed?'logo-collapse-width':'logo-width'">
            <div @click="toindex"
                 v-if="collapsed?true:false"> {{collapsed?sysNameShort:sysName}}</div>
            <!--
            <img src="./assets/page_logo.png"
                 v-if="collapsed?false:true"
                 style="width:200px;height: 90px; margin-left:3px;" />-->
            <p style="width:200px;height: 90px; margin-left:3px;margin-top: 8px;">{{leftSysName}}</p>
          </el-col>
          <el-col :span="10"
                  class="logoban">
            <div :class=" collapsed?'tools collapsed':'tools'"
                 @click="collapse">
              <i class="fa fa-align-justify"></i>
            </div>

            <el-breadcrumb separator="/"
                           class="breadcrumb-inner collapsedLogo">
              <el-breadcrumb-item v-for="item in $route.matched"
                                  :key="item.path">

                <span style=""> {{ item.name }}</span>
              </el-breadcrumb-item>
            </el-breadcrumb>

          </el-col>
          <el-col :span="4"
                  class="userinfo">

            <el-dropdown trigger="hover">
              <span class="el-dropdown-link userinfo-inner">
                {{sysUserName}}
                <img :src="tdLogo"
                     v-if="showTdLogo"
                     height="128"
                     width="128" />
                <img v-if="showDefaultLogo"
                     src="./assets/logo.png"
                     height="128"
                     width="128" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="Setting">设置</el-dropdown-item>
                <el-dropdown-item divided
                                  @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-col>
        <el-col :span="24"
                class="main">

          <aside :class="collapsedClass ">
            <el-scrollbar style="height:100%;background: #2f3e52;"
                          class="scrollbar-handle">
              <el-menu :default-active="$route.path"
                       class="el-menu-vertical-demo"
                       @open="handleopen"
                       @close="handleclose"
                       @select="handleselect"
                       unique-opened
                       router
                       :collapse="isCollapse"
                       background-color="#2f3e52"
                       style="border-right: none;"
                       text-color="#fff"
                       active-text-color="#ffd04b">
                <sidebar v-for="(menu,index) in routes"
                         @collaFa="collapseFa"
                         :key="index"
                         :item="menu" />
              </el-menu>

            </el-scrollbar>
          </aside>

          <el-col :span="24"
                  class="content-wrapper"
                  :class="collapsed?'content-collapsed':'content-expanded'">
            <div class="tags"
                 v-if="showTags">

              <div id="tags-view-container"
                   class="tags-view-container">
                <scroll-pane ref="scrollPane"
                             class="tags-view-wrapper">
                  <router-link v-for="(tag,index) in tagsList"
                               ref="tag"
                               :key="tag.path"
                               :class="{'active': isActive(tag.path)}"
                               :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
                               tag="span"
                               @click.middle.native="closeTags(index)"
                               class="tags-view-item">
                    {{ tag.title }}
                    <span class="el-icon-close"
                          @click.prevent.stop="closeTags(index)" />
                  </router-link>
                </scroll-pane>

              </div>

              <!--<ul>-->
              <!--<li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index">-->
              <!--<span class="tag-dot-inner"></span>-->
              <!--<router-link :to="item.path" class="tags-li-title">-->
              <!--{{item.title}}-->
              <!--</router-link>-->
              <!--<span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span>-->
              <!--</li>-->
              <!--</ul>-->

              <!-- 其他操作按钮 -->
              <div class="tags-close-box">
                <el-dropdown @command="handleTags">
                  <el-button size="mini">
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu size="small"
                                    slot="dropdown">
                    <el-dropdown-item command="left">关闭左侧</el-dropdown-item>
                    <el-dropdown-item command="right">关闭右侧</el-dropdown-item>
                    <el-dropdown-item command="other">关闭其他</el-dropdown-item>
                    <el-dropdown-item command="all">关闭所有</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
            <transition name="fade"
                        mode="out-in">
              <div class="content-az">
                <router-view></router-view>
              </div>
            </transition>
          </el-col>

        </el-col>
      </el-row>

    </transition>

    <transition v-else
                name="fade"
                mode="out-in">
      <div class="content-az">
        <router-view></router-view>
      </div>
    </transition>

    <el-dialog title="Unread Messages"
               :class="newsDialogCss"
               :visible.sync="NewsVisible"
               v-model="NewsVisible"
               :close-on-click-modal="false">
      <div>
        <el-tag v-for="tag in tagNews"
                :key="tag.name"
                closable
                class="tag-new"
                :type="tag.type">
          {{tag.name}}
        </el-tag>

      </div>
    </el-dialog>

    <div class="v-modal "
         @click="closeZModalShadow"
         v-show="NewsVisible"
         tabindex="0"
         style="z-index: 2917;"></div>

    <div class="v-modal "
         @click="collapse"
         v-show="SidebarVisible"
         tabindex="0"
         style="z-index: 2917;"></div>

    <!--报警界面展示-->
    <el-dialog title="有最新的报警！！！"
               :visible.sync="warningFormVisible"
               :close-on-click-modal="false">
      <el-form :model="warningForm"
               size="small"
               label-width="80px"
               ref="warningForm">
        <el-form-item label="报警时间"
                      prop="WarningTime"
                      :rules="[{ required: true, message: '报警时间不能为空'}]">
          <el-date-picker type="datetime"
                          disabled="true"
                          placeholder="选择日期时间"
                          v-model="warningForm.WarningTime"></el-date-picker>
        </el-form-item>
        <el-form-item label="车辆"
                      prop="AgvNameDesc">
          <el-input disabled="true"
                    v-model="warningForm.AgvNameDesc"></el-input>
        </el-form-item>
        <el-form-item label="报警内容"
                      prop="WarningContent"
                      :rules="[{ required: true, message: '报警内容不能为空'}]">
          <el-input disabled="true"
                    v-model="warningForm.WarningContent"></el-input>
        </el-form-item>
        <el-form-item label="报警位置"
                      prop="WarningLocation">
          <el-input disabled="true"
                    v-model="warningForm.WarningLocation"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click.native="iKnowForwarning">标记已读</el-button>
        <el-button type="primary"
                   style="display:none;"
                   @click.native="goToWarning">去处理</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Sidebar from './components/Sidebar'
import ScrollPane from './components/ScrollPane'
import { getLastOneAgvWarning, updateWarningKnow, getUserByToken } from './api/api';

import applicationUserManager from "./Auth/applicationusermanager";
import userAuth from "./Auth/UserAuth";

export default {
  components: { Sidebar, ScrollPane },
  mixins: [userAuth],
  data () {
    return {
      sysName: this.GLOBAL.sysName,
      sysNameShort: this.GLOBAL.sysNameShort,
      leftSysName: this.GLOBAL.leftSysName,
      NewsVisible: false,
      SidebarVisible: false,
      collapsed: false,//默认左侧菜单栏展开 [EditBy shaocx,2021-01-16]
      zModalShadow: false,
      collapsedClass: 'menu-expanded',//menu-expanded
      ispc: false,
      sysUserName: '',//登录昵称
      tdLogo: '',//登录人的头像,默认
      showTdLogo: false,//是否显示DB中的登录人的头像，默认
      showDefaultLogo: true,//是否显示默认的Logo
      newsDialogCss: 'news-dialog',
      sysUserAvatar: '',
      isCollapse: false,
      tagsList: [],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      routes: [],
      tagNews: [
        { name: '前后端分离', type: '' },
        { name: 'vue.js', type: '' },
        { name: 'DDD领域驱动设计', type: 'success' },
        { name: '标签三', type: 'info' },
        { name: '欠费警告！', type: 'warning' },
        { name: '异常报告！', type: 'danger' }
      ],
      visible: false,
      top: 0,
      left: 0,
      selectedTag: {},
      affixTags: [],

      //报警相关
      warningObjList: [],//报警列表
      warningFormVisible: false,
      warningForm: {},
      //定时相关
      timingValue: 5, // 定时频率
      isTimingData: true, // 是否定时获取
      timer: '', // 定时刷新
    }
  },
  methods: {
    //获取 报警信息
    getLastOneAgvWarning () {
      getLastOneAgvWarning({}).then((res) => {
        this.warningForm = res.data.response;
        if (this.warningForm == null) {
          this.warningFormVisible = false;
          this.warningForm = {}
        }
        else {
          this.warningFormVisible = true;
        }
      });
    },
    // 定时刷新
    createdTimer () {
      this.timer = setInterval(this.getLastOneAgvWarning, this.timingValue * 1000)
    },
    //前往处理报警
    goToWarning () {
      this.$router.replace({
        path: "/AGV/AgvWarning",
        query: {
          warningId: this.warningForm.Id
        }
      })
    },
    //将报警标记为‘我知道了’
    iKnowForwarning () {
      let para = { Id: this.warningForm.Id };
      updateWarningKnow(para).then((res) => {
        if (res.data.success) {
          this.$message({
            message: '标记成功！',
            type: 'success'
          });
          this.warningFormVisible = false;
        }
        else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          });
        }
      });
    },
    gotappath (Path) {
      console.log(Path);
      this.$router.replace({
        path: Path,
      });
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath);
    },
    closeZModalShadow () {
      this.NewsVisible = false;
    },
    toindex () {
      this.$router.replace({
        path: "/",
      });
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath);
    },
    onSubmit () {
      console.log('submit!');
    },
    myNews () {

      this.newsDialogCss += ' show ';
      this.NewsVisible = true;
    },
    handleopen () {
      //console.log('handleopen');
    },
    handleclose () {
      //console.log('handleclose');
    },
    handleselect: function (a, b) {
    },
    //退出登录
    logout: function () {
      var _this = this;
      this.$confirm('确认退出吗?', '提示', {
        //type: 'warning'
      }).then(() => {
        window.localStorage.removeItem('user');
        window.localStorage.removeItem('Token');
        window.localStorage.removeItem('TokenExpire');
        window.localStorage.removeItem('NavigationBar');
        window.localStorage.removeItem('refreshtime');
        window.localStorage.removeItem('router');
        sessionStorage.removeItem("Tags");

        global.antRouter = [];

        this.tagsList = [];
        this.routes = [];
        this.$store.commit("saveTagsData", "");

        if (global.IS_IDS4) {
          applicationUserManager.logout();
        } else {
          _this.$router.push('/login');
          window.location.reload()
        }

      }).catch(() => {

      });


    },
    //设置
    Setting: function () {
      var _this = this;
      _this.$router.push('/System/My');
    },
    //折叠导航栏
    collapse: function () {
      this.collapsed = !this.collapsed;

      if (this.ispc) {

        if (this.collapsed) {
          this.collapsedClass = 'menu-collapsed';
        } else {
          this.collapsedClass = 'menu-expanded';
        }
      } else { // mobile
        if (this.collapsed) {
          this.SidebarVisible = true;
          this.collapsedClass = 'menu-collapsed-mobile';
        } else {
          this.SidebarVisible = false;
          this.collapsedClass = 'menu-expanded-mobile';
        }

        this.collapsedClass += ' mobile-ex ';
      }

      this.isCollapse = !this.isCollapse;

    },
    collapseFa: function () {
      if (!this.ispc) {
        this.collapse();
      }
    },
    showMenu (i, status) {
      this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0].style.display = status ? 'block' : 'none';
    },
    isActive (path) {
      return path === this.$route.fullPath;
    },
    // 关闭单个标签
    closeTags (index) {
      const delItem = this.tagsList.splice(index, 1)[0];
      const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
      if (item) {
        delItem.path === this.$route.fullPath && this.$router.push(item.path);

        this.$store.commit("saveTagsData", JSON.stringify(this.tagsList));
      } else {
        this.$router.push('/');
      }
    },
    // 关闭全部标签
    closeAll () {
      this.tagsList = [];
      this.$router.push('/');
      sessionStorage.removeItem("Tags");
    },
    // 关闭其他标签
    closeOther () {
      const curItem = this.tagsList.filter(item => {
        return item.path === this.$route.fullPath;
      })
      this.tagsList = curItem;


      sessionStorage.setItem("Tags", JSON.stringify(this.tagsList))
    },
    // 关闭左侧标签
    closeLeft () {
      let index = this.tagsList.findIndex(item => item.path == this.$route.fullPath);
      var newArr = [];
      for (var i = index; i < this.tagsList.length; i++) {
        newArr.push(this.tagsList[i]);
      }
      this.tagsList = newArr;


      sessionStorage.setItem("Tags", JSON.stringify(this.tagsList))
    },
    // 关闭右侧标签
    closeRight () {
      let index = this.tagsList.findIndex(item => item.path == this.$route.fullPath);
      var newArr = [];
      for (var i = 0; i < (index + 1); i++) {
        newArr.push(this.tagsList[i]);
      }
      this.tagsList = newArr;


      sessionStorage.setItem("Tags", JSON.stringify(this.tagsList))
    },
    // 设置标签
    setTags (route) {
      if (!route.meta.NoTabPage) {
        const isExist = this.tagsList.some(item => {
          return item.path === route.fullPath;
        })
        !isExist && this.tagsList.push({
          title: route.meta.title,
          path: route.fullPath,
          // name: route.matched[1].components.default.name
        })
      }
    },
    // 当关闭所有页面时隐藏
    handleTags (command) {
      if (command === 'other') {
        this.closeOther();
      } else if (command === 'left') {
        this.closeLeft();
      } else if (command === 'right') {
        this.closeRight();
      } else {
        this.closeAll();
      }
    },
    getUserInfoByToken (token) {
      var _this = this;
      var loginParams = { token: token };
      getUserByToken(loginParams).then(data => {
        this.logining = false;
        if (!data.success) {
          _this.$message({
            message: data.message,
            type: 'error'
          });
        } else {

          _this.$notify({
            type: "success",
            message: `欢迎管理员：${data.response.uRealName} ！`,
            duration: 3000
          });

          _this.sysUserName = data.response.uRealName;
          debugger
          _this.tdLogo = data.response.tdLogo;
          _this.tdLogo = _this.tdLogo;
          _this.showTdLogo = _this.tdLogo ? true : false;
          _this.showDefaultLogo = _this.tdLogo ? false : true;

          window.localStorage.user = JSON.stringify(data.response)
        }
      });
    },
  },
  beforeDestroy () {
    //window.clearInterval(this.t)
    this.connection.stop();
    if (this.timer) { // 如果定时器还在运行 或者直接关闭，不用判断
      clearInterval(this.timer)
    }
  },
  mounted () {

    this.createdTimer();
    console.log(this.$route)

    var tags = sessionStorage.getItem('Tags') ? JSON.parse(sessionStorage.getItem('Tags')) : [];

    if (tags && tags.length > 0) {
      this.tagsList = tags;
    }


    var NavigationBar = JSON.parse(window.localStorage.router ? window.localStorage.router : null);
    // var NavigationBar = global.antRouter;

    if (this.routes.length <= 0 && NavigationBar && NavigationBar.length >= 0) {
      this.routes = NavigationBar;
    }

    // 折叠菜单栏
    this.collapse();
  },
  updated () {
    var user = JSON.parse(window.localStorage.user ? window.localStorage.user : null);
    if (user) {
      this.sysUserName = user.uRealName;
      this.tdLogo = user.tdLogo;
      this.showTdLogo = user.tdLogo ? true : false;
      this.showDefaultLogo = user.tdLogo ? false : true;
      this.sysUserAvatar = user.avatar || '../assets/user.png';
    }


    var NavigationBar = JSON.parse(window.localStorage.router ? window.localStorage.router : null);

    if (NavigationBar && NavigationBar.length >= 0) {
      if (this.routes.length <= 0 || (JSON.stringify(this.routes) != JSON.stringify((NavigationBar)))) {
        this.routes = NavigationBar;
      }
    }

  },
  computed: {
    showTags () {
      if (this.tagsList.length > 1) {
        this.$store.commit("saveTagsData", JSON.stringify(this.tagsList));
      }
      return this.tagsList.length > 0;
    }
  },
  watch: {
    // 对router进行监听，每当访问router时，对tags的进行修改
    $route: async function (newValue, from) {

      if (global.IS_IDS4) {
        await this.refreshUserInfo();
      }

      this.setTags(newValue);

      const tags = this.$refs.tag
      this.$nextTick(() => {
        if (tags) {
          for (const tag of tags) {
            if (tag.to.path === this.$route.path) {
              this.$refs.scrollPane.moveToTarget(tag, tags)
              // when query is different then update
              // if (tag.to.fullPath !== this.$route.fullPath) {
              //     this.$store.dispatch('tagsView/updateVisitedView', this.$route)
              // }
              break
            }
          }
        }
      })

    }
  },
  created () {
    // 第一次进入页面时，修改tag的值
    this.setTags(this.$route);
    this.ispc = window.screen.width > 680;

    if (this.ispc) {
      this.collapsedClass = 'menu-expanded';
      this.collapse();
    } else {
      this.collapsedClass = 'menu-expanded-mobile mobile-ex';
      this.collapsed = true;
      this.collapse();
    }


  },
}

</script>

<style lang="css">
@import "./style/home.css";

.el-menu-vertical-demo {
  /*width: 230px;*/
}

.el-breadcrumb {
  line-height: 60px !important;
}
</style>

<style>
.menu-collapsed .el-icon-arrow-right:before {
  display: none;
}

.tags {
  position: relative;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  background: #f0f0f0;
}

.tags ul {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: none;
}

.tags-li {
  float: left;
  margin: 3px 5px 2px 3px;
  border-radius: 3px;
  font-size: 13px;
  overflow: hidden;
  height: 23px;
  line-height: 23px;
  border: 1px solid #e9eaec;
  background: #fff;
  padding: 3px 5px 4px 12px;
  vertical-align: middle;
  color: #666;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

.tags-li-icon {
  cursor: pointer;
}

.tags-li:not(.active):hover {
  background: #f8f8f8;
}

.tags-li-title {
  float: left;
  max-width: 80px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 5px;
  color: #666;
  text-decoration: none;
}

.tags-li.active {
  /*color: #fff;*/
  /*border: 1px solid #10B9D3;*/
  /*background-color: #10B9D3;*/
}

.tags-li.active .tags-li-title {
  /*color: #fff;*/
}

.tags-close-box {
  box-sizing: border-box;
  text-align: center;
  z-index: 10;
  float: right;
  margin-right: 1px;
  line-height: 2;
}
</style>
<style>
/*.logoban{*/
/*width: auto !important;*/
/*}*/
.news-dialog {
  background: #fff;
  z-index: 3000 !important;
  position: fixed;
  height: 100vh;
  width: 100%;
  max-width: 260px;
  top: 60px !important;
  left: 0 !important;
  -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
  -webkit-transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
  transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
  -webkit-transform: translate(100%);
  z-index: 40000;
  left: auto !important;
  right: 0 !important;
  transform: translate(0);
}

.news-dialog .el-dialog {
  margin: auto !important;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: none;
  width: 100%;
}

.news-dialog.show {
  transform: translate(0);
}

.tag-new {
  width: 100%;
  margin: 10px 0;
}

@media screen and (max-width: 680px) {
  .collapsedLogo {
    display: none;
  }

  .el-dialog {
    width: 90% !important;
  }

  .content-expanded {
    max-width: 100% !important;
    max-height: calc(100% - 60px);
  }

  .mobile-ex {
    background: #fff;
    z-index: 3000;
    position: fixed;
    height: 100vh;
    width: 100%;
    max-width: 260px;
    top: 0;
    left: 0;
    -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
    -webkit-transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
    transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
    -webkit-transform: translate(100%);
    z-index: 40000;
    left: auto;
    right: 0;
    transform: translate(100%);
  }

  .mobile-ex.menu-collapsed-mobile {
    transform: translate(0);
  }

  .el-menu--collapse {
    width: 100% !important;
  }

  .el-date-editor.el-input,
  .el-date-editor.el-input__inner,
  .el-cascader.el-cascader--medium {
    width: 100% !important;
  }

  .toolbar.roles {
    width: 100% !important;
  }

  .toolbar.perms {
    width: 800px !important;
  }

  .toolbar.perms .box-card {
    width: 100% !important;
  }

  .login-container {
    width: 300px !important;
  }

  .count-test label {
  }

  .content-wrapper .tags {
    margin: 0px;
    padding: 0px;
  }

  .activeuser {
    display: none !important;
  }
}
</style>

<style>
.tags-view-container {
  height: 34px;
  width: calc(100% - 60px);
  /*background: #fff;*/
  /*border-bottom: 1px solid #d8dce5;*/
  /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);*/
  float: left;
}

.tags-view-container .tags-view-wrapper .tags-view-item {
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 26px;
  line-height: 26px;
  border: 1px solid #d8dce5;
  color: #495060;
  background: #fff;
  padding: 0 8px;
  font-size: 12px;
  margin-left: 5px;
  margin-top: 4px;
}

.tags-view-container .tags-view-wrapper .tags-view-item:first-of-type {
  margin-left: 15px;
}

.tags-view-container .tags-view-wrapper .tags-view-item:last-of-type {
  margin-right: 15px;
}

.tags-view-container .tags-view-wrapper .tags-view-item.active {
  /*background-color: #42b983;*/
  /*color: #fff;*/
  /*border-color: #42b983;*/
}

.tags-view-container .tags-view-wrapper .tags-view-item.active::before {
  content: "";
  background: #2d8cf0;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
  margin-right: 2px;
}

.tags-view-container .contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}

.tags-view-container .contextmenu li {
  margin: 0;
  padding: 7px 16px;
  cursor: pointer;
}

.tags-view-container .contextmenu li:hover {
  background: #eee;
}
</style>

<style>
.tags-view-wrapper .tags-view-item .el-icon-close {
  width: 16px;
  height: 16px;
  vertical-align: 2px;
  border-radius: 50%;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transform-origin: 100% 50%;
}

.tags-view-wrapper .tags-view-item .el-icon-close:before {
  transform: scale(0.6);
  display: inline-block;
  vertical-align: -3px;
}

.tags-view-wrapper .tags-view-item .el-icon-close:hover {
  background-color: #ef2b74;
  color: #fff;
}
</style>
